<template>
  <div class="upload">
    <div>姓 <input type="text" v-model="firstName" /></div>
    <div>名 <input type="text" v-model="lastName" /></div>

    <div>
      全名：<span>{{ fullName }}</span>
    </div>
    <button @click="changeFullName">修改全名</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
/**
 *computed 需要return返回,返回的是一个ref响应式数据,需要.value获取
 */

const firstName = ref("张");
const lastName = ref("三");

const changeFullName = () => {
  fullName.value = "李-四";
};

// 这里定义的computed是只读的
// const fullName = computed(() => {
//   return `${firstName.value} -${lastName.value}`;
// });

// 这里定义的computed是可读可写的
const fullName = computed({
  get() {
    return `${firstName.value} -${lastName.value}`;
  },
  set(value) {
    const [str1, str2] = value.split("-");
    firstName.value = str1;
    lastName.value = str2;
  },
});
</script>

<style scoped lang="scss">
@import "index.module.scss";
</style>
